Setup webawesome dialog and update standard dialog header design #27020

timmo001 · 2025-09-12T12:27:38Z

Breaking change

Proposed change

Starting point for #27143

Currently applied to restart dialog

Type of change

Dependency upgrade
Bugfix (non-breaking change which fixes an issue)
New feature (thank you!)
Breaking change (fix/feature causing existing functionality to break)
Code quality improvements to existing code or addition of tests

Example configuration

Additional information

This PR fixes or closes issue: fixes #
This PR is related to issue or discussion:
Link to documentation pull request:

Checklist

The code change is tested and works locally.
There is no commented out code in this PR.
Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Documentation added/updated for www.home-assistant.io

marcinbauer85 · 2025-09-12T13:22:09Z

Nice @timmo001 !

I've noticed on mobile it doesn't scroll correctly:
https://github.com/user-attachments/assets/f7eff89e-acfc-4cf4-9c87-8640559c41cf
The footer buttons have no margin between them

dcapslock · 2025-09-14T09:10:13Z

@timmo001 for my info, is the plan to keep ha-dialog as is for now? Why I ask is that Browser Mod uses ha-dialog for popups and will need to adjust to changes if ha-dialog is to use webawesome soon. So seeking info on impacts and timing of these changes so I can plan for Browser Mod to keep up. Thanks.

timmo001 · 2025-09-14T11:57:30Z

Yes I believe the plan is to slowly migrate over time to the new webawesome dialog and keep the original available

timmo001 · 2025-09-17T10:43:22Z

src/components/ha-wa-dialog.ts

src/components/ha-dialog-footer.ts

wendevlin

There is still some work to do 🙂

Mobile

It sets height to 100vh, but width is still 95vw, what looks strange:

What happens if I have just a alert dialog, I don't want to have width 100vw. There should be a prop for that to define what happens on mobile.

combo box issue

I am not sure if we can fix this, because I think we have the same issue with the ha-md-dialog when I am done with the new target-picker we can test it with it, if the issue is gone.

I am just wondered that you havn't seen this issue yourself.

ideas for the future

I like the footer component, but I would like to go one step further and have some kind of dialog-button-footer which uses ha-dialog-footer but you just have to define the buttons in an array or smth. Same would be interesting for the header, to quickly define standardized dialogs.

src/components/ha-dialog-header.ts

src/components/ha-wa-dialog.ts

src/dialogs/more-info/ha-more-info-dialog.ts

src/components/ha-dialog-footer.ts

src/components/ha-wa-dialog.ts

src/dialogs/more-info/ha-more-info-dialog.ts

home-assistant · 2025-09-26T11:04:28Z

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

timmo001 · 2025-09-26T11:16:25Z

Strange one spotted by @marcinbauer85

The tooltip/popover doesnt show on this dialog

screenrecording-2025-09-26_12-00-47.mp4

Everything else seems to be interactable still

wendevlin · 2025-09-26T11:45:15Z

Strange one spotted by @marcinbauer85

The tooltip/popover doesnt show on this dialog

yeah I think the issue is that the dialog itself is in the top-layer but the tooltip is added to the document. But top-layer is above that 😒

timmo001 · 2025-09-29T15:23:17Z

Strange one spotted by @marcinbauer85
The tooltip/popover doesnt show on this dialog

yeah I think the issue is that the dialog itself is in the top-layer but the tooltip is added to the document. But top-layer is above that 😒

Yeah looks to be the case, it also looks like its rendering in the wrong position:

Strange thing is this has z-index: 9999999 (renders at end of body):

timmo001 · 2025-09-30T09:40:03Z

Not sure how to fix the canvas overlay issue, seems to work OK on mobile, but not desktop

wendevlin · 2025-09-30T10:20:47Z

Not sure how to fix the canvas overlay issue, seems to work OK on mobile, but not desktop

😞 thats a deal breaker for more-info. The only idea for now is to not open the dialog in non-modal mode.
But this can lead to other issues and I like the fact that you can open it on the top layer.
reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog

src/components/ha-wa-dialog.ts

timmo001 · 2025-09-30T12:50:12Z

Not sure how to fix the canvas overlay issue, seems to work OK on mobile, but not desktop

😞 thats a deal breaker for more-info. The only idea for now is to not open the dialog in non-modal mode. But this can lead to other issues and I like the fact that you can open it on the top layer. reference: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog

Still confuses me how the mobile overlay seems to be fine. Does the mobile canvas overlay work different somehow?

timmo001 · 2025-09-30T15:27:47Z

Also so this doesnt get lost

I am not sure if we can fix this, because I think we have the same issue with the ha-md-dialog when I am done with the new target-picker we can test it with it, if the issue is gone.

I am just wondered that you havn't seen this issue yourself.

Also have this issue, its the same issue the graph has I guess

timmo001 · 2025-10-01T12:26:55Z

Chart tooltips are now set to render inside the container instead of the body:

screenrecording-2025-10-01_13-24-31.mp4

The last one is the dropdown for targets which may be alleviated in future:

I am not sure if we can fix this, because I think we have the same issue with the ha-md-dialog when I am done with the new target-picker we can test it with it, if the issue is gone.

Co-authored-by: Wendelin <[email protected]>

… query for deeply nested elements (ha-form etc)

home-assistant bot added the cla-signed label Sep 12, 2025

bramkragten self-assigned this Sep 15, 2025

marcinbauer85 added this to Components (Design System) Sep 15, 2025

marcinbauer85 moved this to In Progress in Components (Design System) Sep 17, 2025

timmo001 force-pushed the ha-dialog-to-wa branch 2 times, most recently from 916b526 to ece87af Compare September 22, 2025 10:33

timmo001 mentioned this pull request Sep 23, 2025

Migrate dialogs to webawesome #27143

Open

timmo001 self-assigned this Sep 23, 2025

wendevlin reviewed Sep 23, 2025

View reviewed changes

src/components/ha-wa-dialog.ts Show resolved Hide resolved

timmo001 marked this pull request as ready for review September 23, 2025 13:21

wendevlin reviewed Sep 24, 2025

View reviewed changes

src/components/ha-dialog-footer.ts Outdated Show resolved Hide resolved

timmo001 force-pushed the ha-dialog-to-wa branch from 9b10658 to af53a51 Compare September 25, 2025 09:03

wendevlin requested changes Sep 26, 2025

View reviewed changes

home-assistant bot marked this pull request as draft September 26, 2025 11:04

timmo001 requested a review from wendevlin September 30, 2025 09:41

wendevlin reviewed Sep 30, 2025

View reviewed changes

src/components/ha-wa-dialog.ts Outdated Show resolved Hide resolved

timmo001 force-pushed the ha-dialog-to-wa branch from 3491274 to 7c1c0b6 Compare September 30, 2025 14:46

timmo001 and others added 23 commits October 8, 2025 16:10

Use spacing vars

7f1c7b5

Remove from device editor

4702be7

Update src/components/ha-wa-dialog.ts

5cd4f3b

Co-authored-by: Wendelin <[email protected]>

Update src/components/ha-dialog-footer.ts

fb80d5e

Co-authored-by: Wendelin <[email protected]>

Update src/components/ha-dialog-footer.ts

079861c

Co-authored-by: Wendelin <[email protected]>

Remove now unused

fd35c2c

heading -> header

c1411d7

headerNavigationIcon

6b19911

Remove toggle width on title click

208399b

actionItems -> headerActionItems

ca417d5

Syntax

2b14e4b

Cleanup, update docs

1e02290

Cleanup

b4b1688

Add to gallery

ab1c196

Add title

23baac7

Fix ha-form-string not using autofocus from schema

5b42df1

Update gallery form schema

044e564

Change to use autofocus instead of mwc's dialogInitialFocus, add deep…

8577fc8

… query for deeply nested elements (ha-form etc)

Remove deep query selector

991b6ef

Delegate focus

5bd279b

Focus at light dom

3579964

pass it down the chain

2627ac1

Document the autofocus finding

3ab1506

timmo001 force-pushed the ha-dialog-to-wa branch from 90421a4 to 3ab1506 Compare October 8, 2025 15:10

wendevlin approved these changes Oct 8, 2025

View reviewed changes

bramkragten added the cla-recheck label Oct 8, 2025

home-assistant bot removed the cla-recheck label Oct 8, 2025

wendevlin merged commit 1b932ae into dev Oct 9, 2025
16 checks passed

wendevlin deleted the ha-dialog-to-wa branch October 9, 2025 06:16

github-project-automation bot moved this from In Progress to Done in Components (Design System) Oct 9, 2025

Setup webawesome dialog and update standard dialog header design #27020

Setup webawesome dialog and update standard dialog header design #27020

Uh oh!

Conversation

timmo001 commented Sep 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Breaking change

Proposed change

Type of change

Example configuration

Additional information

Checklist

Uh oh!

marcinbauer85 commented Sep 12, 2025

Uh oh!

dcapslock commented Sep 14, 2025

Uh oh!

timmo001 commented Sep 14, 2025

Uh oh!

timmo001 commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODO

Future ideas

Uh oh!

Uh oh!

Uh oh!

wendevlin left a comment

Choose a reason for hiding this comment

Mobile

combo box issue

ideas for the future

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

home-assistant bot commented Sep 26, 2025

Uh oh!

timmo001 commented Sep 26, 2025

Uh oh!

wendevlin commented Sep 26, 2025

Uh oh!

timmo001 commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

timmo001 commented Sep 30, 2025

Uh oh!

wendevlin commented Sep 30, 2025

Uh oh!

Uh oh!

timmo001 commented Sep 30, 2025

Uh oh!

timmo001 commented Sep 30, 2025

Uh oh!

timmo001 commented Oct 1, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

timmo001 commented Sep 12, 2025 •

edited

Loading

timmo001 commented Sep 17, 2025 •

edited

Loading

timmo001 commented Sep 29, 2025 •

edited

Loading